<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
数据绑定
双向绑定：(v-bind:)只能从data流向页面
双向绑定：(v-mode:)数据不仅可以从data流向于页面，而且可以从输入框流向于data
	备注：1、双向绑定多用于表单类元素上，如（input、select等）
		 2、v-model:可以简写为v-model,因为v-model默认收集的是value的值。	-->
<div id="root">
    单向数据绑定：<input type="text" :value="name"/>
    双向数据绑定: <input type="text" v-model="name"/>
</div>
</body>
<script type="text/javascript">

  new Vue({
      el:'#root', //el :vue的一个配置，用于将vue实例与容器作绑定
      data:{  //data:vue的一个配置，用于存放数据
          name:'world',
          address:'我在西安'
      }
  })
</script>
</html>